<template>
  <div class="pos">
    <el-row>
      <el-col :style="wrapHeight" :span="1">
        <left-nav></left-nav>
      </el-col>
      <el-col :style="wrapHeight" :span="8">
        <Order @delete="delSingleGoods" @add="addOrderList" @payAll="payAll" @deleteAll="deleteAllOrder" :tableData="tableData" :totalCount="totalCount" :totalPrice="totalPrice"></Order>
      </el-col>
      <el-col :style="wrapHeight" :span="15">
        <product @add="addOrderList" :type0Goods="type0Goods" :oftenData="oftenData"></product>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import LeftNav from "@/common/LeftNav";
import Order from "@/common/Order";
import Product from "@/common/Product";
import Config from "../config";
import axios from "axios";

export default {
  data() {
    return {
      type0Goods: [],
      tableData: [],
      oftenData: []
    };
  },
  components: {
    LeftNav,
    Order,
    Product
  },
  mounted() {
    this.getData();
    this.getTypeData();
  },
  methods: {
    async getData() {
      let res = await axios.get(Config.getPosUrl);
      if (res.data.length) {
        this.oftenData = res.data;
      }
    },
    getTypeData() {
      axios(Config.getTypeUrl)
        .then(reponse => {
          this.type0Goods = reponse.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    addOrderList(good) {
      this.totalCount = 0;
      this.totalPrice = 0;
      let arr = this.tableData.filter(v => v.goodsId === good.goodsId);
      if (arr.length) {
        ++arr[0].count;
      } else {
        let newGood = {
          goodsId: good.goodsId,
          goodsName: good.goodsName,
          price: good.price,
          count: 1
        };
        this.tableData.push(newGood);
      }
    },
    delSingleGoods(good) {
      this.tableData = this.tableData.filter(
        val => val.goodsId != good.goodsId
      );
      this.$message.error('删除单个成功')
    },
    deleteAllOrder () {
      this.tableData = []
      this.$message({
        message:'删除成功',
        type:'success'
      });
    },
    payAll () {
      this.tableData = []
      this.$message({
        message: '支付成功',
        type: 'success'
      })
    }
  },
  computed: {
    wrapHeight() {
      return {
        height: document.body.clientHeight + "px"
      };
    },
    totalCount: {
      get() {
        let totalCount = 0;
        this.tableData.forEach(val => {
          totalCount += val.count;
        });
        return totalCount;
      },
      set() {}
    },
    totalPrice: {
      get() {
        let totalPrice = 0;
        this.tableData.forEach(val => {
          totalPrice += val.price * val.count;
        });
        return totalPrice;
      },
      set() {}
    }
  }
};
</script>
<style>
.pos {
  height: 100%;
}
</style>

